<template>
  <div class="container">
    <Header/>
    <div class="wrap">
      <div class="content">
        <router-view/>
      </div>
    </div>

  </div>
</template>
<script>

import Header from './components/Header.vue'

export default {
  name: 'Layout',
  components: {
    Header
  },
  computed: {
    state() {
      return this.$store.getters.user_state
    }
  }
}
</script>
<style rel="stylesheet" lang="scss">
  $gray: #e8e8e8;
  /*element-ui 样式覆盖*/
  .content {

    .el-steps {
      margin-bottom: 90px;
    }
    .el-step:last-of-type .el-step__main {
      width: 90px;
    }
    .el-step {
      flex-basis: 29% !important;
    }
    .el-step__main {
      position: absolute;
      top: 5px;
      line-height: 1;
      left: 43px;
      z-index: 9;
    }
    .el-step__icon.is-text {
      width: 30px;
      height: 30px;
      margin-top: -4px;
    }
    .el-step__head.is-finish {
      border-color: #409EFF;
      .el-step__icon.is-text {
        color: #fff;
        background-color: #409eff;
      }
    }
    .el-step__line {
      height: 6px;
      margin-right: 20px !important;
      margin-left: 160px;
    }
    .el-step__title {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      line-height: 14px;
    }
    .el-checkbox {
      padding-right: 40px;
    }
    .el-checkbox + .el-checkbox {
      margin-left: 0;
    }
    .el-select {
      width: 100%;
    }
  }

  /*end*/
</style>
<style rel="stylesheet" lang="scss" scoped>
  $bg: rgba(239, 241, 244, 1);
  .container {
    min-height: 100%;
    padding: 104px 30px 40px 30px;
    background-color: $bg;
  }

  .wrap {
    min-width: 1200px;
    min-height: calc(100vh - 144px);
    padding: 80px 110px 56px 110px;
    background-color: #fff;
  }

  .content {
  }
</style>
